<template>
	<div>
		<div class="head">
			<a @click="$router.push({path: '/Otc'})" class="return"></a>
			订单记录
		</div>
		<div class="overlay">
			<div class="overlay-content scrolling">
				<van-tabs v-model="active" title-active-color="white" title-inactive-color="rgb(133, 141, 172)" style="margin: 0px 10px;" @change="getTab">
					<van-tab title="进行中订单">
						<van-pull-refresh v-model="isLoading" @refresh="onRefresh" pulling-text=' '>
							<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
								<div style="padding: 10px 0px;font-size: 13px;" v-for="item in list" :key="item.id">
									<van-card class="order">
										<div slot="title" style="padding: 5px 0px;font-size: 14px;" @click="$router.push({path: '/prePayment',query:{id:item.id}})">
											<span style="color: rgb(71, 170, 105);" v-if="item.typeId == 0">购买</span>
											<span v-if="item.typeId == 1">出售</span>
											<span>AIDT</span>
											<span style="font-size: 13px;float: right;color: #47AA69;padding-right: 5px;" v-if="item.status == 2">待付款<van-icon class="cvs" name="arrow" size="14"/></span>
											<span style="font-size: 13px;float: right;color: rgb(133, 141, 172);padding-right: 5px;" v-if="item.status == 3">已付款<van-icon class="cvs" name="arrow" size="14"/></span>
											<span style="font-size: 13px;float: right;color: #47AA69;padding-right: 5px;" v-if="item.status == 4">订单申诉中<van-icon class="cvs" name="arrow" size="14"/></span>
										</div>
										<div slot="desc" style="padding-top: 3px;padding-bottom: 5px;color: rgb(133, 141, 172);">
											<van-row style="opacity: 0.5;">
												<van-col span="8" style="text-align: left;">
													时间
												</van-col>
												<van-col span="8" style="text-align: center;">
													数量（AIDT）
												</van-col>
												<van-col span="8" style="text-align: right;">
													交易总额（CNY）
												</van-col>
											</van-row>
											<van-row style="padding-top: 5px;">
												<van-col span="8" style="text-align: left;" v-text="item.updateTime">
													2019-06-18 15:31:25
												</van-col>
												<van-col span="8" style="text-align: center;padding-right: 10px;" v-text="Number(item.numberDeals).toFixed(4)">
													5045.123456
												</van-col>
												<van-col span="8" style="text-align: right;padding-right: 10px;" v-text="Number(item.numberDeals * item.unitPrice).toFixed(2)">
													34182.45
												</van-col>
											</van-row>
										</div>
										<div slot="price" style="padding: 5px 0px;font-size: 12px;color: white;">
											<span v-text="item.otcName" v-if="centerType == 0">豆豆网络公司</span>
											<span v-text="item.userName" v-if="centerType == 1">豆豆网络公司</span>
										</div>
									</van-card>
								</div>
							</van-list>
						</van-pull-refresh>
					</van-tab>
					<van-tab title="历史订单">
						<van-pull-refresh v-model="isLoading2" @refresh="onRefresh2" pulling-text=' '>
							<van-list v-model="loading2" :finished="finished2" finished-text="没有更多了" @load="onLoad2">
								<div style="padding: 10px 0px;font-size: 13px;" v-for="item in list2" :key="item.id">
									<van-card class="order">
										<div slot="title" style="padding: 5px 0px;font-size: 14px;" @click="$router.push({path: '/prePayment',query:{id:item.id}})">
											<span style="color: rgb(71, 170, 105);" v-if="item.typeId == 0">购买</span>
											<span v-if="item.typeId == 1">出售</span>
											<span>AIDT</span>
											<span style="font-size: 13px;float: right;color: rgb(133, 141, 172);padding-right: 5px;" v-if="item.status == 1">订单已取消<van-icon class="cvs" name="arrow" size="14"/></span>
											<span style="font-size: 13px;float: right;color: rgb(133, 141, 172);padding-right: 5px;" v-if="item.status == 5">确认已收款<van-icon class="cvs" name="arrow" size="14"/></span>
											<span style="font-size: 13px;float: right;color: rgb(133, 141, 172);padding-right: 5px;" v-if="item.status == 6">已仲裁<van-icon class="cvs" name="arrow" size="14"/></span>
										</div>
										<div slot="desc" style="padding-top: 3px;padding-bottom: 5px;color: rgb(133, 141, 172);">
											<van-row style="opacity: 0.5;">
												<van-col span="8" style="text-align: left;">
													时间
												</van-col>
												<van-col span="8" style="text-align: center;">
													数量（AIDT）
												</van-col>
												<van-col span="8" style="text-align: right;">
													交易总额（CNY）
												</van-col>
											</van-row>
											<van-row style="padding-top: 5px;">
												<van-col span="8" style="text-align: left;" v-text="item.updateTime">
													2019-06-18 15:31:25
												</van-col>
												<van-col span="8" style="text-align: center;padding-right: 10px;" v-text="Number(item.numberDeals).toFixed(4)">
													5045.123456
												</van-col>
												<van-col span="8" style="text-align: right;padding-right: 10px;" v-text="Number(item.numberDeals * item.unitPrice).toFixed(2)">
													34182.45
												</van-col>
											</van-row>
										</div>
										<div slot="price" style="padding: 5px 0px;font-size: 12px;color: white;">
											<span v-text="item.otcName" v-if="centerType == 0">豆豆网络公司</span>
											<span v-text="item.userName" v-if="centerType == 1">豆豆网络公司</span>
										</div>
									</van-card>
								</div>
							</van-list>
						</van-pull-refresh>
					</van-tab>
				</van-tabs>
			</div>
		</div>
	</div>
</template>

<script>
	import { otc, mine } from './../utils/api';
	export default {
		data() {
			return {
				active: 0,
				isLoading: false,
				finished: false,
				loading: false,
				listLength: 0,
				total: 0,
				size: 10,
				current: 1,
				isLoading2: false,
				finished2: false,
				loading2: false,
				listLength2: 0,
				total2: 0,
				list: [],
				list2: [],
				size2: 10,
				current2: 1,
				centerType: ''
			}
		},
		created() {

		},
		mounted() {
			this.getList2(); // 历史订单 [预加载]
			this.getCenter();
		},
		methods: {
			getCenter() { // 判断是不是代理
				mine.getPersonal().then(res => {
					this.centerType = res.data.agency;
				})
			},
			getTab(type) {
				if(type == 0){
					this.getList();
				}else if(type == 1){
					this.getList2();
				}
			},
			getList() { // 进行中
				otc.getOrder({
					"size": this.size,
					"current": this.current,
					"type": '',
					"status": '7'
				}).then(res => {
					this.list = res.data.records;
					this.listLength = res.data.records.length;
					this.total = res.data.total;
				})
			},
			getList2() { // 历史
				otc.getOrder({
					"size": this.size2,
					"current": this.current2,
					"type": '',
					"status": '8'
				}).then(res => {
					this.list2 = res.data.records;
					this.listLength2 = res.data.records.length;
					this.total2 = res.data.total;
				})
			},
			onRefresh() {
				this.getList();
				setTimeout(() => {
					this.$toast({
						duration: 800,
						message: '刷新成功'
					});
					this.isLoading = false;
				}, 500);
			},
			onLoad() { // 上拉加载
				this.getList();
				// 异步更新数据
				setTimeout(() => {
					if(this.total > this.listLength) {
						this.size += 10;
						this.loading = false;
					} else {
						// 加载状态结束
						this.finished = true;
						this.loading = false;
					}
				}, 500);
			},
			onRefresh2() {
				this.getList2();
				setTimeout(() => {
					this.$toast({
						duration: 800,
						message: '刷新成功'
					});
					this.isLoading2 = false;
				}, 500);
			},
			onLoad2() { // 上拉加载
				if(this.total2 > this.listLength2) {
					this.getList2();
				}
				// 异步更新数据
				setTimeout(() => {
					if(this.total2 > this.listLength2) {
						this.size2 += 10;
						this.loading2 = false;
					} else {
						// 加载状态结束
						this.finished2 = true;
						this.loading2 = false;
					}
				}, 500);
			},
		}
	}
</script>

<style lang="less" scoped>
	/deep/ .van-tabs__nav {
		background-color: transparent;
	}
	
	/deep/ .van-tabs__line {
		height: 2px;
		background-color: #47aa69;
	}
	
	/deep/ .van-card {
		background: rgb(36, 41, 62);
		color: white;
		border-radius: 5px;
	}
	
	/deep/ .van-card__price {
		display: initial;
	}
	
	/deep/ .van-cell {
		border-bottom: 1px solid rgb(76, 83, 106);
		background: #24293e;
		padding: 5px 0px;
	}
	
	/deep/ .van-cell:not(:last-child)::after {
		border: 0;
	}
	
	/deep/ input {
		font-size: 12px;
	}
	
	/deep/ .van-hairline--top-bottom::after {
		border-color: rgb(133, 141, 172);
	}
	
	/deep/ .cvs.van-icon {
		position: absolute;
		top: 8px;
		right: -10px;
		color: rgb(133, 141, 172);
	}
	
	/deep/ .order.van-card {
		background: transparent;
		border-bottom: 1px solid rgb(76, 83, 106);
		border-bottom-left-radius: 0px;
		border-bottom-right-radius: 0px;
	}
</style>